<template>
  <div>
    <el-dialog
      title="修改权限组"
      v-model="showDialog"
      :before-close="close"
      width="800px"
      append-to-body
    >
      <!-- <FormBody ref="formBody" /> -->
      <el-form
        ref="formBody"
        :model="_formObj"
        :rules="formRules"
        label-width="90px"
      >
        <el-form-item prop="filePortfolioName" label="权限组名称">
          <el-input v-model="_formObj.filePortfolioName" :maxlength="32" />
        </el-form-item>
        <el-form-item label="授权说明">
          <el-input
            v-model="_formObj.authorizationInstructions"
            type="textarea"
            :maxlength="512"
          />
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button type="primary" size="small" @click="submit">
          保存
        </el-button>
        <el-button size="small" @click="close">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="editGroupDialog">
const { proxy } = getCurrentInstance()
const store = useStore()
const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  formObj: {
    type: Object,
    default: () => {
      return {}
    },
  },
})
const emits = defineEmits(['submit', 'close'])
const formRules = ref({
  filePortfolioName: [
    { required: true, trigger: 'blur', message: '请输入权限组名称' },
  ],
})
const showDialog = computed({
  get() {
    return props.open
  },
  set(val) {
    emits('update:open', val)
  },
})
const _formObj = computed({
  get() {
    return props.formObj
  },
  set(val) {
    emits('update:formObj', val)
  },
})

function submit() {
  proxy.$refs['formBody'].validate((valid) => {
    if (valid) {
      emits('submit')
    } else {
      proxy.$message.warning('请按照提示正确输入数据')
    }
  })
}

function close() {
  emits('close')
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin: 45px 0 0 0;
}
</style>
